<script setup lang="ts">
import MList from "@/components/MList.vue"
import {
    useMessage,
    NTag,
    NIcon, NButton,
    type DataTableColumns,
    NPopconfirm
} from 'naive-ui';
import { type RowData } from 'naive-ui/es/data-table/src/interface';
import { ref, h, onMounted } from 'vue';

import { Edit, Delete } from "@vicons/carbon"
import useTime from "~/utils/Time";
let { format } = useTime()

import { useFeature } from "~/common/mixins/";
let { DeleteOne, Pagination } = useFeature()

let listRef = ref();

let columns = ref<DataTableColumns<RowData>>([
    {
        type: 'selection'
    }, {
        title: "门店名称",
        key: "fdName"
    }, {
        title: "门店管理员",
        key: "fdManagerName"
    }, {
        title: "状态",
        width: 80,
        key: "fdStatus",
        render(rowData, _) {
            return h(NTag, { type: (rowData.fdStatus == 1 ? "success" : "error") }, "正常");
        }
    }, {
        title: "创建时间",
        key: "fdCreatedAt",
        width: 160,
        render(rowData, _) {
            return format(rowData.fdCreatedAt)
        }
    }, {
        title: '操作',
        key: "action",
        width: 110,
        render(rowData, _) {
            return [h(NButton, {
                circle: true, renderIcon() {
                    return h(NIcon, {}, {
                        default: () => h(Edit)
                    });
                }, type: "primary", style: "margin-right:10px;", onClick(_) {
                    onShow(rowData);
                },
            }, ""), renderDeleteIcon(rowData.fdId)]
        }
    }
]);

const renderDeleteIcon = (id: any) => {
    return h(NPopconfirm, {
        onPositiveClick: () => {
            DeleteOne(belongStore, id).then(() => {
                message.success("删除成功");
                handleQuery();
            })
        },
        negativeText: '取消',
        positiveText: '删除'
    }, {
        trigger: () => h(NButton, {
            circle: true, renderIcon() {
                return h(NIcon, {}, {
                    default: () => h(Delete)
                });
            }, type: "error"
        }, ""),
        default: "确认要删除这行数据？"
    })
}


import { useBelongStore } from "@/store";
let belongStore = useBelongStore();

import { } from "naive-ui";
let message = useMessage();

let handleQuery = () => {
    listRef.value?.handleQuery(belongStore);
}

onMounted(() => {
    handleQuery();
})


import EditBelong from "./component/editBelong.vue";
let editBelongRef = ref();

let onShow = (row: any) => {
    editBelongRef.value?.openDialog(row);
}


</script>

<template>
    <div class="mc_1">
        <MList ref="listRef" :title="'区域'" @on-load="handleQuery" @on-show="onShow({ fdStatus: 1 })"
            :total="Pagination.ListTotal" :columns="columns" :data="Pagination.ListData">
            <template #extra_btn>
                <div class="extra_btn">
                </div>
            </template>
        </MList>

        <EditBelong ref="editBelongRef" @handle-query="handleQuery"></EditBelong>
    </div>


</template>

<style scoped>
.toolbar {
    padding: 10px 0 10px 10px;

    .n-button:first-child {
        margin-right: 10px;
    }
}
</style>
